<template>
    <div id="app">
        nowplaying!!!
        <ul>
           <!-- <li v-for="item in list" :key="item.id" @click="topath(item)">{{item.name}}</li> -->
           <router-link
                v-for="item in datalist"
                :key="item.filmId"
                :to="{
                    name:'detail',
                    params:{id:item.filmId},
                }"
                tag="li"
           >
            <img :src="item.poster" :alt="item.name">
            <div>
            <p class="pp">{{item.name}}|{{item.filmType.name}}</p>
            <p class="actors">主演:{{item.actors | actorFilter}}</p>
            <p>{{item.nation}}</p>
            </div>
           </router-link>
           <!-- <router-link
                v-for="item in list"
                :key="item.name"
                :to="'/detail/'+item.name+'?title=文章一'"
                tag="li"
           >{{item.name}}</router-link> -->
        </ul>
    </div>
</template>

<script>
import Vue from 'vue'
import instance from '@/utils/http'
import {mapState} from 'vuex'
//定义过滤器
// Vue.filter("actorFilter",data=>{
//     if(data){
//          return data.map(item=>item.name).join("")
//     }else{
//         return "暂无主演"
//     }
// })
export default Vue.extend({
    data(){
        return {
            list:[
                {id:1,name:123,title:'文章123'},
                 {id:2,name:456,title:'文章456'},
                  {id:3,name:789,title:'文章789'}
            ],
            datalist:[]
        }
    },
        computed:{
        ...mapState('city',['cityId'])
    },
    created(){
        instance.get(`/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=1&k=671065`,{
            headers:{
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then(res=>{
            this.datalist = res.data.data.films
        })
    },
    methods:{
        topath(item){
            this.$router.push(`/detail/${item.name}`)
        }
    }
})
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
    display: flex;
    li{
        flex: 1;
        display: flex;
        img{
            width: 200px;
            height: 200px;
        }
        .actors{
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
     }
    }
}
     .pp{
            font-size: 20px;
        }
</style>